<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title>IGNORED</title>
</head>
<h:body>
	<ui:composition template="/templates/layout.xhtml">
		<ui:define name="content">
			<div class="center_content">

				<div class="center_title_bar">Productos</div>
				<f:view>
					<h:form id="form">
					
					<h:outputLabel value="Producto :" for="txt_producto"
							style="font-size:12px;color:#847676;padding:2px;font-weight:bold;"></h:outputLabel>
						<p:inputText id="txt_producto" value="#{productosBean.nombre}"
							style="padding:5px" />
						<p:commandButton value="Buscar"
							action="#{productosBean.buscarProducto}" update=":form:data"
							style="margin:10px 0" id="btnQuery" />


						<p:dataGrid var="prod" value="#{productosBean.lista}" columns="3"
							rows="12" id="data" styleClass="ui-datagrid-no-border">
							
								<p:column>
									<p:panel styleClass="center_prod_box">
										<h:panelGrid columns="1" style="width:100%">
										
											<h:outputText value="#{prod.nombre}" style="color:#ff8a00;font-weight:bold;"/>																	
											<p:graphicImage value="resources/images/#{prod.imagen}.jpg" width="100"/>
											<h:outputText value="#{prod.precio}0 $">
											<f:convertNumber minFractionDigits="2"/>
											</h:outputText>
											
										</h:panelGrid>
									</p:panel>	
										<div class="prod_details_tab">
											<a href="#" class="prod_buy">+ Carrito</a>          
											<p:commandLink update=":form:prodDetail" oncomplete="prodDialog.show()" title="Detalles" styleClass="prod_details">
											    <h:outputText value="Detalles"/>  
												<f:setPropertyActionListener value="#{prod}"
													target="#{productosBean.selectedProd}" />
											</p:commandLink>
											</div>
									
								</p:column>							
						</p:dataGrid>

						<p:dialog header="Producto Detalles" widgetVar="prodDialog"
							modal="true">
							<p:outputPanel id="prodDetail" style="text-align:center;"
								layout="block">

								<p:graphicImage
									value="/resources/images/#{productosBean.selectedProd.imagen}.jpg" />

								<h:panelGrid columns="2" cellpadding="5">
									<h:outputLabel for="modelNo" value="Nombre: " />
									<h:outputText id="modelNo"
										value="#{productosBean.selectedProd.nombre}" />

									<h:outputLabel for="year" value="Descripcion: " />
									<h:outputText id="year"
										value="#{productosBean.selectedProd.descripcion}" />

									<h:outputLabel for="color" value="Precio: " />
									<h:outputText id="color"
										value="#{productosBean.selectedProd.precio}" />
								</h:panelGrid>
							</p:outputPanel>
						</p:dialog>



						

					</h:form>
				</f:view>
			</div>
			<!-- end of center content -->


		</ui:define>
	</ui:composition>
</h:body>
</html>